
export default function chart3() {




  return (
    <>
      <div style={{
        width: '100%',
        height: '40px',
        color: '#fff',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
      }} >
        <div style={{
          fontSize: '20px',
          fontWeight: 'bold',
          margin: '0 auto',
          paddingLeft: '100px',
          boxSizing: 'border-box',
        }} >配水调度</div>
        <select style={{
          // 设置组件的 z-index 属性，用于控制其在页面中的堆叠顺序
          // z-index 值越大，组件在页面中的层次越高，显示在越前面
          // 这里设置为 999，表示该组件在大多数其他组件之上
          zIndex: 1,
        }} >
          <optgroup label="2024年">
            <option value="">2024-09</option>
            <option value="">2024-10</option>
          </optgroup>
          <optgroup label="2025年">
            <option value="">2025-01</option>
            <option value="">2025-02</option>
            <option value="">2025-03  </option>
          </optgroup>
        </select>
      </div>
      <div style={{
        width: '100%',
        color: '#fff',
        display: 'flex',
        justifyContent: 'space-around',
        flexWrap: 'wrap',
        // padding: '10px',
      }} >
        <div style={{
          width: '40%',
          height: '90px',
          textAlign: 'center',
          padding: '5px 0',
          boxSizing: 'border-box',
          backgroundColor: '#0f3d7c',
          borderRadius: '10px',
          border: '1px solid #fff',
          // marginTop: '10px',
          // marginRight: '10px'
        }} >
          <p>年度下发调度计划</p>
          <p>09个</p>
        </div>


        <div style={{
          width: '40%',
          height: '90px',
          textAlign: 'center',
          padding: '5px 0',
          boxSizing: 'border-box',
          backgroundColor: '#0f3d7c',
          borderRadius: '10px',
          border: '1px solid #fff',
          // marginTop: '10px',
          // marginRight: '10px'
        }} >
          <p>月度下发调度计划</p>
          <p>00个</p>
        </div>
        <div style={{
          width: '40%',
          height: '90px',
          textAlign: 'center',
          padding: '5px 0',
          boxSizing: 'border-box',
          backgroundColor: '#0f3d7c',
          borderRadius: '10px',
          border: '1px solid #fff',
          marginTop: '20px',
        }} >
          <p>年度计划用水量</p>
          <p>135.2万方</p>
        </div>
        <div style={{
          width: '40%',
          height: '90px',
          textAlign: 'center',
          padding: '5px 0',
          boxSizing: 'border-box',
          backgroundColor: '#0f3d7c',
          borderRadius: '10px',
          border: '1px solid #fff',
          marginTop: '20px',
        }} >
          <p>月度计划用水量</p>
          <p>0.0万方</p>
        </div>
      </div>
    </>
  )
}